<template>
  <div class="bookmarks-container">
    <a-popover placement="bottomRight"> 
      <a class="ant-dropdown-link" @click.prevent> 
        <img src="../../assets/images/bookmarks.png" alt="" class="colle-img"> 
      </a>
      <template #content>
        <div class="bookmarks-content-container">
          <section v-for="(item, index) in bookmarksList" :key="index"  @click="goPage(item.path)">
            <div> 
              <span v-if="item.icon" :class="[ item.icon, list.includes(item.icon) ? 'side-menu-icon': '']"></span> 
              <CheckCircleOutlined v-else/>
              <!--{{ item.name }}-->
              {{$t(`menu.${item.permission}`)}}
            </div>
            <div class="text-red"> 
              <DeleteOutlined class="opt-del-icon"  @click.stop="onDel(item.id)"/>  
            </div>
          </section> 
          <a-empty v-if="!bookmarksList.length" />
        </div>
      </template>
    </a-popover>
  </div>
</template>
<script setup>
import { store } from "@/store"
import {computed, onMounted} from 'vue' 
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { CheckCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue' 
import axios from "@/utils/request"
import i18n from "@/locales/index"
const { t } = i18n.global
const list = ['icon-chanxianshishixinxi', 'icon-zhidanguanli', 'icon-paichandanguanli'] 
let router = useRouter()

const bookmarksList = computed(() => {
  return store.state.setting.bookmarksList;
})

const goPage = (path ) => {  
  if(path)router.push({ path  })
} 
const onDel = async (id) => {
  try { 
    const res = await axios.deleteAction('/api/system/menu-favorites/delete', {id} )
    if (res.success) {
      message.success(res.msg || t('common.doSuccess'))
      store.dispatch('getBookmarks')
    }
  }catch {
    console.log('取消收藏失败')
  }
}

onMounted(async ()=> {
  await store.dispatch('getBookmarks')
})
</script>
